<template>
  <div class="user-actions">
    <div class="actions-header">
      <h3>账户操作</h3>
      <p>管理您的账户设置和安全选项</p>
    </div>

    <div class="actions-list">
      <!-- 安全相关操作 -->
      <div class="action-group">
        <h4 class="group-title">安全设置</h4>

        <div class="action-item" @click="handleChangePassword">
          <div class="action-icon security">
            <LockOutlined />
          </div>
          <div class="action-content">
            <div class="action-title">修改密码</div>
            <div class="action-desc">定期更新密码保护账户安全</div>
          </div>
          <RightOutlined class="action-arrow" />
        </div>

        <div class="action-item" @click="handleSecuritySettings">
          <div class="action-icon security">
            <SafetyCertificateOutlined />
          </div>
          <div class="action-content">
            <div class="action-title">安全设置</div>
            <div class="action-desc">管理登录设备、安全验证等</div>
          </div>
          <RightOutlined class="action-arrow" />
        </div>
      </div>

      <!-- 账户管理操作 -->
      <div class="action-group">
        <h4 class="group-title">账户管理</h4>

        <div class="action-item" @click="handleDataExport">
          <div class="action-icon data">
            <DownloadOutlined />
          </div>
          <div class="action-content">
            <div class="action-title">导出数据</div>
            <div class="action-desc">下载您的个人数据备份</div>
          </div>
          <RightOutlined class="action-arrow" />
        </div>

        <div class="action-item" @click="handlePrivacySettings">
          <div class="action-icon privacy">
            <EyeInvisibleOutlined />
          </div>
          <div class="action-content">
            <div class="action-title">隐私设置</div>
            <div class="action-desc">管理个人信息可见性</div>
          </div>
          <RightOutlined class="action-arrow" />
        </div>
      </div>

      <!-- 危险操作 -->
      <div class="action-group danger-group">
        <h4 class="group-title danger">危险操作</h4>

        <div class="action-item danger" @click="handleLogout">
          <div class="action-icon danger">
            <LogoutOutlined />
          </div>
          <div class="action-content">
            <div class="action-title">退出登录</div>
            <div class="action-desc">安全退出当前账户</div>
          </div>
          <RightOutlined class="action-arrow" />
        </div>

        <div class="action-item danger" @click="handleDeleteAccount">
          <div class="action-icon danger">
            <DeleteOutlined />
          </div>
          <div class="action-content">
            <div class="action-title">注销账户</div>
            <div class="action-desc">永久删除账户及所有数据</div>
          </div>
          <RightOutlined class="action-arrow" />
        </div>
      </div>
    </div>

    <!-- 确认对话框 -->
    <a-modal
      v-model:open="showConfirmModal"
      :title="confirmModal.title"
      :content="confirmModal.content"
      @ok="handleConfirm"
      @cancel="handleCancelConfirm"
      :ok-button-props="{ danger: confirmModal.danger }"
    >
      <template #title>
        <div class="modal-title">
          <ExclamationCircleOutlined v-if="confirmModal.danger" class="danger-icon" />
          {{ confirmModal.title }}
        </div>
      </template>
      <p>{{ confirmModal.content }}</p>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import {
  DeleteOutlined,
  DownloadOutlined,
  ExclamationCircleOutlined,
  EyeInvisibleOutlined,
  LockOutlined,
  LogoutOutlined,
  RightOutlined,
  SafetyCertificateOutlined,
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { reactive, ref } from 'vue';

const emit = defineEmits<{
  changePassword: [];
  logout: [];
  deleteAccount: [];
  securitySettings: [];
  dataExport: [];
  privacySettings: [];
}>();

const showConfirmModal = ref(false);
const confirmModal = reactive({
  title: '',
  content: '',
  danger: false,
  action: '',
});

const handleChangePassword = () => {
  emit('changePassword');
};

const handleSecuritySettings = () => {
  emit('securitySettings');
  message.info('安全设置功能开发中...');
};

const handleDataExport = () => {
  emit('dataExport');
  message.info('数据导出功能开发中...');
};

const handlePrivacySettings = () => {
  emit('privacySettings');
  message.info('隐私设置功能开发中...');
};

const handleLogout = () => {
  showConfirmModal.value = true;
  confirmModal.title = '确认退出登录';
  confirmModal.content = '您确定要退出当前账户吗？';
  confirmModal.danger = false;
  confirmModal.action = 'logout';
};

const handleDeleteAccount = () => {
  showConfirmModal.value = true;
  confirmModal.title = '确认注销账户';
  confirmModal.content = '此操作将永久删除您的账户及所有相关数据，且无法恢复。您确定要继续吗？';
  confirmModal.danger = true;
  confirmModal.action = 'deleteAccount';
};

const handleConfirm = () => {
  if (confirmModal.action === 'logout') {
    emit('logout');
    message.success('已退出登录');
  } else if (confirmModal.action === 'deleteAccount') {
    emit('deleteAccount');
    message.success('账户注销申请已提交');
  }
  showConfirmModal.value = false;
};

const handleCancelConfirm = () => {
  showConfirmModal.value = false;
};
</script>

<style lang="less" scoped>
.user-actions {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;

  .actions-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

    h3 {
      font-size: 20px;
      font-weight: 600;
      color: #1e293b;
      margin: 0 0 4px 0;
    }

    p {
      font-size: 14px;
      color: #64748b;
      margin: 0;
    }
  }

  .actions-list {
    padding: 8px 0;

    .action-group {
      margin-bottom: 24px;

      &:last-child {
        margin-bottom: 0;
      }

      .group-title {
        font-size: 14px;
        font-weight: 600;
        color: #64748b;
        margin: 0 0 8px 0;
        padding: 0 24px 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;

        &.danger {
          color: #ef4444;
        }
      }

      .action-item {
        display: flex;
        align-items: center;
        padding: 16px 24px;
        cursor: pointer;
        transition: all 0.2s ease;
        border-bottom: 1px solid #f8fafc;

        &:hover {
          background: #f8fafc;
        }

        &:last-child {
          border-bottom: none;
        }

        &.danger {
          &:hover {
            background: #fef2f2;
          }
        }

        .action-icon {
          width: 40px;
          height: 40px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;
          flex-shrink: 0;

          &.security {
            background: #dbeafe;
            color: #3b82f6;
          }

          &.data {
            background: #dcfce7;
            color: #16a34a;
          }

          &.privacy {
            background: #fef3c7;
            color: #d97706;
          }

          &.danger {
            background: #fee2e2;
            color: #ef4444;
          }
        }

        .action-content {
          flex: 1;
          min-width: 0;

          .action-title {
            font-size: 16px;
            font-weight: 500;
            color: #1e293b;
            margin-bottom: 2px;
          }

          .action-desc {
            font-size: 13px;
            color: #64748b;
            line-height: 1.4;
          }
        }

        .action-arrow {
          color: #cbd5e1;
          font-size: 12px;
          transition: all 0.2s ease;
        }

        &:hover .action-arrow {
          color: #667eea;
          transform: translateX(2px);
        }
      }
    }

    .danger-group {
      .action-item.danger {
        .action-title {
          color: #ef4444;
        }
      }
    }
  }

  .modal-title {
    display: flex;
    align-items: center;
    gap: 8px;

    .danger-icon {
      color: #ef4444;
    }
  }
}

:deep(.ant-modal) {
  .ant-modal-header {
    border-bottom: 1px solid #f1f5f9;
  }

  .ant-modal-body {
    padding: 24px;
  }

  .ant-modal-footer {
    border-top: 1px solid #f1f5f9;
  }
}
</style>
